<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-house-container`]">
      <view class="text">为了给您提供优质、精准的找房服务苏享家需要向您申请一下权限</view>
      <view :class="['systemPower', { active: item.active }]" v-for="(item, index) in systemPower" :key="index" @click="setPermission(item)">
        <view class="image-bg">
          <image class="image" :src="item.icon"></image>
        </view>
        <view class="box">
          <view class="name">{{ item.name }}</view>
          <view class="desc">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
// #ifdef APP-PLUS
import permision from '@/common/libs/permission'
// #endif

export default {
  name: 'house',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      systemPower: [
        {
          name: '定位',
          key: 'locationAuthorized',
          code: 'location',
          icon: CDN('/common/static/images/map-pin@3x.png'),
          text: '可基于您当前位置，提供门店距离、周边信息以及地图找房功能。',
          active: false,
        },
        // #ifdef APP-PLUS
        {
          name: '通知',
          key: 'notificationAuthorized',
          code: 'push',
          icon: CDN('/common/static/images/volume-2%403x.png'),
          text: '用于预定、签约合同时身份证认证的证件照片上传，或用于保存图片。',
          active: false,
        },
        // #endif
        {
          name: '照片',
          key: 'albumAuthorized',
          code: 'album',
          icon: CDN('/common/static/images/image%403x.png'),
          text: '用于预定、签约时的身份认证的照片上传，或用于保存图片。',
          active: false,
        },
        {
          name: '访问摄像头',
          key: 'cameraAuthorized',
          code: 'camera',
          icon: CDN('/common/static/images/instagram@3x.png'),
          text: '用于预定、签约合同时的身份证认证、活体识别等功能。',
          active: false,
        },
        {
          name: '访问麦克风',
          key: 'microphoneAuthorized',
          code: 'record',
          icon: CDN('/common/static/images/mic@3x.png'),
          text: '用于预定、签约合同时的活体识别功能',
          active: false,
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    this.getAppAuthSetting()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    getAppAuthSetting() {
      let appAuthObj = {}
      // #ifdef APP-PLUS
      appAuthObj = uni.getAppAuthorizeSetting()
      this.setActive(appAuthObj)
      // #endif

      // #ifdef MP
      uni.getSetting({
        success: (res) => {
          // console.log('🚀 ~ success ~ res:', res.authSetting)
          appAuthObj = res.authSetting
          this.setActive(appAuthObj)
        },
      })
      // #endif
    },

    setActive(obj) {
      // #ifdef APP-PLUS
      this.systemPower.forEach((item) => {
        if (Object.prototype.hasOwnProperty.call(obj, item.key)) {
          if (obj[item.key] === 'authorized') {
            item.active = true
          }
          //特殊处理 安卓端相册权限状态获取
          if (!permision.isIOS && item.key === 'albumAuthorized') {
            const compat = plus.android.importClass('androidx.core.content.ContextCompat')
            const context = plus.android.runtimeMainActivity()
            const result = compat.checkSelfPermission(context, 'android.permission.READ_EXTERNAL_STORAGE')
            item.active = result === 0 ? true : false
          }
        }
      })
      // #endif

      // #ifdef MP
      this.systemPower.forEach((item) => {
        switch (item.key) {
          case 'locationAuthorized':
            if (obj['scope.userLocation']) item.active = true
            break

          case 'albumAuthorized':
            if (obj['scope.writePhotosAlbum'] || obj['scope.album']) item.active = true
            break

          case 'cameraAuthorized':
            if (obj['scope.camera']) item.active = true
            break

          case 'microphoneAuthorized':
            if (obj['scope.record']) item.active = true
            break

          default:
            break
        }
      })
      // #endif
    },

    async setPermission(e) {
      const { code, active } = e
      if (active) {
        // #ifdef APP-PLUS
        uni.openAppAuthorizeSetting()
        // #endif
        // #ifdef MP
        uni.openSetting()
        // #endif
      }
      // #ifdef APP-PLUS
      const status = await permision.checkPermission(code)
      if (status === 1) this.getAppAuthSetting()
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: white !important;
}
.#{prefixCls('house-container')} {
  position: relative;
  background: white;
  box-sizing: border-box;
  padding: 15px;
  .text {
    margin-bottom: 50px;
  }
  .systemPower {
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .image-bg {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background: #eef5f8;
      display: flex;
      justify-content: center;
      align-items: center;
      .image {
        width: 24px;
        height: 24px;
      }
    }
    .box {
      width: calc(100% - 50px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      .name {
        font-weight: bold;
        font-size: 18px;
      }
      .desc {
        font-size: 12px;
        color: #666666;
      }
    }
  }
  .active {
    position: relative;
    border-color: $uv-primary;
    &::after {
      position: absolute;
      content: '✓';
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $uv-primary;
      right: 0;
      top: 0;
      width: 20px;
      height: 15px;
      padding: -5px 0;
      box-sizing: border-box;
    }
  }
}
</style>
